// 使用Less 只需要安装插件easy less 在setting.json配置一下
// 创建一个index.less  会自动将代码转换成css文件
// 主要运用:  变量 嵌套  伪类 伪元素  媒体查询
@width: 600px;
@height: 600px;
@color: blue;
* {
  padding: 0;
  margin: 0;
}

.container {
  width: @width;
  height: @height;
  background: @color;

  header {
    height: 100px;
    background: #998833;
  }

  section {
    height: 400px;
    background: #FE8;

    &:hover { // 嵌套 伪类
      background: #987;
    }

    &::before { // 伪元素
      content: 'hello world';
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: yellow;
    }

    @media screen and (max-width: 500px) {
      // 媒体查询
      background: #901; // 当窗口缩小时则颜色改变
    }
  }
}
